import { useEffect } from "react";
import { useModel } from "umi";
import OrgTree from "react-org-tree";
import { useReactive } from "ahooks";
import { Card as SemiCard, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { Spin, Space, Radio } from "antd";
import { OrganizationGraph } from "@ant-design/graphs";

import useGlobalSetting from "../hooks/globalSetting/useGlobalSetting";
import useDepartmentToTree from "../hooks/department/useDepartmentToTree";
import useAllInstitutionsToTree from "../hooks/institution/useAllInstitutionsToTree";

import TreeOrganizationItem from "../components/tree/Organization";
import TreeDepartmentItem from "../components/tree/Department";
import TreePersonItem from "../components/tree/Person";
import TreeCategoryItem from "../components/tree/Category";

// 概览
const DashboardPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { organizationInfo } = useModel("organization.info");

    const { loadGlobalSettings } = useGlobalSetting();
    const { loadAllDepartmentsToTree } = useDepartmentToTree();
    const { loading, isShowTree, loadAllInstitutionsToTree, institutionTree } = useAllInstitutionsToTree();

    const state = useReactive({
        loading: false,
        allData: [],
        treeData: {},
        selectNode: null,
        isShowTree: false,
        horizontal: false,
    });

    // const loadTreeData = async () => {
    //     state.loading = true;
    //     state.isShowTree = false;

    //     let globalSettings = await loadGlobalSettings();

    //     let treeData = {
    //         id: 0,
    //         oiUuid: organizationInfo.uuid,
    //         oiName: organizationInfo.fullName,
    //         type: "organization",
    //         maInfo: globalSettings["organization-head"],
    //         children: [
    //             { id: 1, oiUuid: "职能部门", oiName: "职能部门", oiType: "职能部门", type: "category" },
    //             { id: 2, oiUuid: "分支机构", oiName: "分支机构", oiType: "分支机构", type: "category" },
    //             { id: 3, oiUuid: "项目组", oiName: "项目组", oiType: "项目组", type: "category" },
    //             { id: 4, oiUuid: "专业组", oiName: "专业组", oiType: "专业组", type: "category" },
    //             { id: 5, oiUuid: "兴趣组", oiName: "兴趣组", oiType: "兴趣组", type: "category" },
    //             { id: 6, oiUuid: "活动组", oiName: "活动组", oiType: "活动组", type: "category" },
    //         ],
    //     };

    //     // let departments = await loadAllDepartmentsToTree();
    //     // treeData.children[0].children = departments;

    //     // let branchs = await loadAllInstitutionsToTree("分支机构");
    //     // treeData.children[1].children = branchs;

    //     state.treeData = treeData;

    //     state.loading = false;
    //     state.isShowTree = true;
    // };

    // useEffect(() => {
    //     loadTreeData();
    // }, []);

    const renderContent = (data) => {
        let content = "";
        switch (data.type) {
            case "organization":
                content = <TreeOrganizationItem key={data.id} data={data} selectNode={state.selectNode} />;
                break;
            case "category":
                content = <TreeCategoryItem key={data.id} data={data} selectNode={state.selectNode} />;
                break;
            case "department":
            case "branch":
            case "branch-department":
            case "project":
            case "project-department":
            case "specialitiy":
            case "interest":
            case "activity":
                content = <TreeDepartmentItem key={data.id} data={data} selectNode={state.selectNode} />;
                break;
            case "department-member":
            case "branch-member":
            case "branch-department-member":
            case "project-member":
            case "project-department-member":
            case "specialitiy-member":
            case "interest-member":
            case "activity-member":
            case "person":
                content = <TreePersonItem key={data.id} data={data} selectNode={state.selectNode} />;
                break;

            default:
                break;
        }
        return content;
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 15 }}>机构总览</span>}
                headerStyle={{ padding: "7px 12px" }}
                headerExtraContent={
                    <Space>
                        {/* <Radio.Group
                            options={[
                                { label: "竖向", value: false },
                                { label: "横向", value: true },
                            ]}
                            onChange={({ target: { value } }) => (state.horizontal = value)}
                            value={state.horizontal}
                            optionType="button"
                            buttonStyle="solid"
                        /> */}
                        <Button icon={<IconRefresh />} onClick={loadAllInstitutionsToTree}></Button>
                    </Space>
                }
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto", textAlign: "center" }}
            >
                <Spin spinning={loading}>
                    {/* <OrgTree
                            horizontal={state.horizontal}
                            data={institutionTree}
                            collapsable={true}
                            labelClassName={"org-tree-label"}
                            expandAll={true}
                            renderContent={renderContent}
                            onClick={(e, data) => (state.selectNode = data)}
                        /> */}
                    <OrganizationGraph
                        data={institutionTree}
                        height={cardBodyHeight - 10}
                        autoFit={false}
                        layout={{ direction: "TB" }}
                        nodeCfg={{
                            autoWidth: true,
                            padding: 9,
                            style: (node) => {
                                let nodeStyle = {};
                                if (node.id === "root") nodeStyle = { fill: "#91d5ff", stroke: "#91d5ff" };
                                if (node.nodeType === "分类") nodeStyle = { fill: "#ddd" };
                                if (node.nodeType === "机构") nodeStyle = { fill: "#eee" };
                                return nodeStyle;
                            },
                            label: {
                                style: (node, group, type) => {
                                    const rootStyles = {
                                        title: { fill: "#000" },
                                        name: { fill: "#000" },
                                    };
                                    const styles = {
                                        icon: { width: 32, height: 32 },
                                        title: { fill: "#000" },
                                        name: { fill: "#000" },
                                    };
                                    if (node.id === "root") return rootStyles[type];
                                    return node.value?.type === "成员" ? styles[type] : {};
                                },
                            },
                        }}
                        onReady={(graph) => {
                            graph.on("node:click", (evt) => {
                                // console.log(evt);
                            });
                        }}
                    />
                </Spin>
            </SemiCard>
        </div>
    );
};

export default DashboardPage;
